<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop">甲醇客户信息</div>
      <div class="loadSecond"></div>
      <div class="loadExcel loadExcel2">
        <div class="button" type="success" @click="addOne()">新增</div>
        <div class="multiButton" type="success" @click="deleteMulti()">
          删除
        </div>
      </div>
      <!-- 第一个table -->
      <div class="table table1" :style="{ width: tableWidth }">
        <el-table
          :header-cell-style="{ background: '#FAFAFA', height: '20px' }"
          :row-style="{ height: 30 + 'px' }"
          :cell-style="{ padding: 0 + 'px' }"
          :data="tableData"
          border
          stripe
          style="width: 100%; height: auto"
          max-height="63vh"
          @selection-change="selecttableFunction"
          @row-dblclick="handleRowDblclick"
          ><el-table-column type="selection" width="35" align="center" />
          <el-table-column
            align="center"
            label="序号"
            type="index"
            :index="indexNumber"
            min-width="50"
          >
          </el-table-column>

          <el-table-column label="船公司" align="center" min-width="200">
            <el-table-column
              align="center"
              min-width="200"
              prop="companyFullName"
              label="船公司名称"
            >
            </el-table-column>
            <el-table-column
              align="center"
              min-width="200"
              prop="companyName"
              label="简称"
            >
            </el-table-column>
            <el-table-column
              align="center"
              min-width="100"
              prop="image"
              label="Logo"
            >
              <template #default="scope">
                <div class="logoImage">
                  <img :src="imageSrc(scope.row.image)" alt="" />
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="船型"
            align="center"
            min-width="220"
            prop="shipType"
          >
            <template #default="scope">
              <div v-for="item in scope.row.shipTypeList">
                {{ item }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="船队数量"
            align="center"
            min-width="150"
            prop="fleetNum"
          >
          </el-table-column>
          <el-table-column
            label="累计加注量"
            align="center"
            min-width="150"
            prop="fillingAmount"
          >
          </el-table-column>
          <el-table-column
            label="最近一次加注日期"
            align="center"
            min-width="120"
            prop="lastFillDate"
            :formatter="formatDate"
          >
          </el-table-column>

          <el-table-column
            label="合约签约形式"
            align="center"
            min-width="150"
            prop="contractSigningForm"
          >
          </el-table-column>
          <el-table-column
            label="合约签约日期"
            align="center"
            min-width="120"
            prop="contractSigningDate"
            :formatter="formatDate"
          >
          </el-table-column>
        </el-table>
        <!-- 内容过多，会出现滚动条 -->
      </div>
      <div class="foot" style="margin-top: 0">
        <div class="currentPage">当前第{{ page }}/{{ totalPages }}页</div>
        <div
          class="lastPage"
          :style="{ background: color }"
          @click="clickLastPage()"
        >
          上一页
        </div>
        <div
          class="nextPage"
          :style="{ backgroundColor: color1 }"
          @click="clickNextPage()"
        >
          下一页
        </div>
        <div class="currentNumber">共{{ totalNumber }}条</div>
        <div>跳转至:</div>
        <input
          type="text"
          class="skipPage"
          style="width: 50px !important"
          v-model="shipPageNumer"
        />
        <div class="sureSkip" @click="skipPage">确定</div>
      </div>
    </div>
    <div class="dialog" ref="dialog" :style="{ display: show }">
      <div class="loadHomeWorkIneer">
        <div class="changeTop">
          <div
            class="delete"
            @click="deleteOne(id)"
            v-show="addOrEdit == '编辑'"
          >
            删除
          </div>
          <div class="sure" @click="sureAdd()">确认</div>
          <div class="cancel" @click="close()">取消</div>
        </div>
        <div class="dialogText">{{ addOrEdit }}</div>
        <div class="manyInput">
          <div class="iuptInnerContain">
            <div class="inputInner">
              <div class="name">船公司名称:</div>
              <input
                type="text"
                placeholder="船公司名称(中文)"
                v-model="companyFullName"
              />
            </div>
            <div class="inputInner">
              <div class="name">简称:</div>
              <input
                type="text"
                placeholder="简称(英文)"
                v-model="companyName"
              />
            </div>
            <div class="inputInner">
              <div class="name">合约签约形式:</div>
              <input
                type="text"
                placeholder="合约签约形式"
                v-model="contractSigningForm"
              />
            </div>
            <div class="inputInner">
              <div class="name">合约签约日期:</div>
              <div class="inputContainer">
                <el-config-provider :locale="locale">
                  <el-date-picker
                    v-model="contractSigningDate"
                    type="date"
                    placeholder="合约签订日期"
                    format="YYYY/MM/DD"
                    value-format="YYYY/MM/DD"
                    @change="handleStartDateChange"
                  />
                </el-config-provider>
              </div>
            </div>
            <div
              class="inputInner"
              style="display: flex; justify-content: center; width: 100%"
            >
              <div class="name1" v-if="logoFlag == false" @click="uploadLogo()">
                上传logo
              </div>
              <div
                class="name1"
                v-else-if="logoFlag == true"
                @click="uploadLogo()"
              >
                更换logo
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="dialog2" :style="{ display: uploadfile }">
      <div class="upContain">
        <input
          type="file"
          ref="clearFile"
          class="addfile"
          @change="getFile($event)"
          accept=".jpeg,.jpg,.png"
        />
      </div>
      <div class="fileName">
        <div v-show="fileName">文件名:{{ fileName }}</div>
      </div>
      <div class="upFileSrue">
        <button class="buttonUpdata" @click="cancelUp()">取消</button>
        <button class="buttonUpdata buttonUpdata1" @click="submitAddFile()">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
import $ from "jquery";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      shipCompanyId: 0,
      labelName: "船公司名称",
      shipPageNumer: 1,
      shipPageNumer1: 1,
      multi: [],
      multi1: [],
      totalNumber: 0,
      totalNumber1: 0,
      token: "",
      page1: 1,
      size1: 4,
      color2: "#EBEBEB",
      color3: "#268FDE",
      currentNum1: 0,
      totalPages1: 2,
      locale: zhCn,
      show4: "none",
      flag: 0,
      smallTable: [],
      show3: "none",
      tableData: [],
      tableData1: [],
      tableList: [],
      tableWidth: null,
      page: 1,
      size: 10,
      pageList: [],
      show: "none",
      addOrEdit: "新增",
      currentNum: 0,
      endPickerOptions: "",
      companyName: "",
      contractExpirationDate: "",
      contractNature: "",
      contractSigningDate: "",
      fleet: "",
      shipType: "",
      serialNumber: "",
      id: "",
      totalPages: null,
      uploadfile: "none",
      companyFullName: "",
      contractSigningForm: "",

      data: {
        companyName: "",
        companyFullName: "",
        contractNature: "",
        contractSigningDate: "",
        contractSigningForm: "",
        id: "",
      },
      show1: "none",
      color: "#EBEBEB",
      color1: "#EBEBEB",
      file: null,
      fileName: "",
      jtData: null,
      logoFlag: false,
      show2: "none",
    };
  },

  methods: {
    submitAddFile() {
      this.$message({
        message: "Logo选择成功",
        type: "success",
      });
      this.uploadfile = "none";
      this.fileName = "";
      document.getElementsByClassName("addfile")[0].value = "";
    },
    imageSrc(src) {
      if (src) {
        return `data:mage/png;base64,${src}`;
      } else return "";
    },
    uploadLogo() {
      this.uploadfile = "block";
    },
    // 监听第一个日期选择器的值变化
    indexNumber(index) {
      return (this.page - 1) * this.size + index + 1;
    },
    handleStartDateChange() {
      if (
        this.contractSigningDate &&
        this.contractExpirationDate &&
        this.contractSigningDate > this.contractExpirationDate
      ) {
        // 如果开始日期晚于结束日期，提示用户并重置结束日期
        this.$message.warning("签订时间不能晚于到期时间，已重置到期时间");
        this.contractExpirationDate = null;
      }

      // 更新第二个日期选择器的可选范围
      this.endPickerOptions = {
        disabledDate: (time) => {
          // 结束日期不能早于开始日期
          if (this.contractSigningDate) {
            return time.getTime() < this.contractSigningDate.getTime();
          }
          return false;
        },
      };
    },
    // 监听第二个日期选择器的值变化
    handleEndDateChange() {
      if (
        this.contractSigningDate &&
        this.contractExpirationDate &&
        this.contractExpirationDate < this.contractSigningDate
      ) {
        // 如果结束日期早于开始日期，提示用户并重置结束日期
        this.$message.warning("到期时间不能早于签订时间，已重置到期时间");
        this.contractExpirationDate = null;
      }
    },
    handleRowDblclick(row) {
      this.clickEdit(row.id);
    },

    skipPage() {
      if (this.shipPageNumer <= this.totalPages && this.shipPageNumer > 0) {
        this.page = this.shipPageNumer;
        this.getRenderList();
      } else {
        this.$message({
          type: "warning",
          message: "超出页面数量范围",
        });
      }
    },

    // 第一个批量删除开始========================
    selecttableFunction(row) {
      if (row.length > 0) {
        this.multi = [];
        row.forEach((element) => {
          this.multi.push(element.id);
        });
      } else {
        this.multi = [];
      }
    },

    deleteMulti() {
      // let that = this;
      if (this.multi.length == 0) {
        return this.$message({
          type: "warning",
          message: "请先选中再进行批量删除操作！",
        });
      }
      let data = {
        idList: this.multi + "",
      };

      this.$alert("确定删除选中的信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/ship-company`,
              params: data,
            }).then((r) => {
              if (r.status == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                if (this.currentNum == this.multi.length && this.page > 1) {
                  this.page--;
                }
                this.getRenderList();
              }
            });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    //第一个批量删除结束=============================

    //第二个批量删除结束=============================
    getFileName() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day =
        date.getDate() > 10 ? date.getDate().toString() : "0" + date.getDate();
      let hour =
        date.getHours() > 10
          ? date.getHours().toString()
          : "0" + date.getHours();
      let min =
        date.getMinutes() > 10
          ? date.getMinutes().toString()
          : "0" + date.getMinutes();
      date = null;
      return `${year}${month}${day}${hour}${min}`;
    },

    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];

      if (data == null || data == "" || data == undefined) {
        return null;
      }
      let date = new Date(data);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}-${month}-${day}`;
    },

    customIndex(index) {
      return (this.page - 1) * this.size + index + 1;
    },

    // 导入文件================
    uploadFile() {
      this.uploadfile = "block";
    },
    async getFile(event) {
      const file = event.target.files[0];
      if (file.size > 1000000) {
        return this.$message({
          message: "文件大小超出限制",
          type: "warning",
        });
      }
      this.fileName = file.name;

      
      if (!file) return;

      // 创建 FileReader 对象
      const reader = new FileReader();

      // 定义读取完成时的回调
      reader.onload = (event) => {
        const base64String = event.target.result; // 获取 Base64 字符串


        // 如果需要纯 Base64 数据（去掉 data:image/png;base64, 前缀）
        const pureBase64 = base64String.split(",")[1];

        this.image = pureBase64;
      };

      // 开始读取文件（转换为 Base64）
      reader.readAsDataURL(file);
    },

    cancelUp() {
      this.file = "";

      this.uploadfile = "none";
      this.fileName = "";
      document.getElementsByClassName("addfile")[0].value = "";
    },
    // 导入文件结束=============

    clickEdit(a) {
      this.addOrEdit = "编辑";
      this.tableData.forEach((item) => {
        if (item.id == a) {
          this.image = item.image;
          try {
            if (this.image) {
              this.logoFlag = true;
            } else {
              this.logoFlag = false;
            }
          } catch (error) {}
          this.companyName = item.companyName;
          this.contractSigningDate = item.contractSigningDate;
          this.contractSigningForm = item.contractSigningForm;
          this.companyFullName = item.companyFullName;
          this.id = a;
        }
        this.show = "block";
      });
    },

    // 删除数据
    deleteOne(a) {
      // let that = this;
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/ship-company/${a}`,
            })
              .then((r) => {
                if (r.status == "SUCCESS") {
                  this.$message({
                    type: "success",
                    message: "删除成功",
                  });
                  if (this.currentNum == 1 && this.page > 1) {
                    this.page--;
                  }
                  this.getRenderList();
                  this.show = "none";
                }
              })
              .catch((err) => {
                this.$message({
                  type: "danger",
                  message: "出错了！",
                });
              });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },

    // 弹窗确认按钮
    sureAdd() {
      this.data.contractSigningForm = this.contractSigningForm;
      this.data.contractSigningDate = this.contractSigningDate;
      this.data.companyName = this.companyName;
      this.data.companyFullName = this.companyFullName;
      this.data.image = this.image;
      this.data.type = 1;
      this.data.id = this.id;
      // return;
      if (this.addOrEdit == "编辑") {
        service({
          method: "put",
          data: this.data,
          url: "/ship-company",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.getRenderList();
              this.show = "none";
              this.clearCanShu();
              this.cancelUp();
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      } else {
        service({
          method: "post",
          data: this.data,
          url: "/ship-company",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "新增成功",
              });
              this.getRenderList();
              this.show = "none";
              this.clearCanShu();
              this.cancelUp();
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      }
    },

    reduceDate(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}-${month}-${day}`;
    },
    // 关闭弹窗
    close() {
      this.show = "none";
      this.show1 = "none";
      this.show3 = "none";
      this.clearCanShu();
    },

    // 新增
    addOne() {
      this.addOrEdit = "新增";
      // this.$refs["dialog"].style.display = show;
      this.show = "block";
    },

    // 导出文件

    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },
    // 获取列表数据
    async getRenderList() {
      let data = {
        page: this.page,
        size: this.size,
        type: 1,
      };

      await service({
        methods: "get",
        url: "/ship-company/find-one-page",
        params: data,
      })
        .then((e) => {

          this.totalPages = e.data.totalPages;
          this.totalNumber = e.data.totalElements;
          if (this.totalPages == 0) {
            this.totalPages = 1;
          }
          if (this.page < this.totalPages) {
            this.color1 = "#268FDE";
          } else {
            this.color1 = "#EBEBEB";
          }
          if (this.page == 1) {
            this.color = "#EBEBEB";
          } else {
            this.color = "#268FDE";
          }
          this.tableData = e.data.content;
          if (e.data.content.length > 0) {
            this.shipCompanyId = e.data.content[0].id;
            this.labelName = e.data.content[0].companyName;
          }

          this.currentNum = e.data.numberOfElements;
        })
        .catch((err) => {
          alert(err);
        });
    },

    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //注意这里的data是表格绑定的字段，根据自己的需求来改
          if (item.index === arr[index - 1].index) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex == 0 ||
        columnIndex == 1 ||
        columnIndex == 2 ||
        columnIndex == 3 ||
        columnIndex == 4 ||
        columnIndex == 5 ||
        columnIndex == 6 ||
        columnIndex == 7 ||
        columnIndex == 8 ||
        columnIndex == 9 ||
        columnIndex == 13
      ) {
        const _row = this.flitterData(this.tableData1).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
        // if (row.index) {
        // }
        // if (rowIndex % row.length == 0) {
        //   return {
        //     rowspan: row.length,
        //     colspan: 1,
        //   };
        // } else {
        //   return {
        //     rowspan: 0,
        //     colspan: 0,
        //   };
        // }
      }
    },

    formatterDate(a) {
      if (a) {
        let date = new Date(a);
        let year = date.getFullYear();
      let month = date.getMonth() + 1;
        let day = date.getDate();
        return `${year}/${month}/${day}`;
      } else {
        return "";
      }
    },

    clearCanShu() {
      this.id = "";
      this.companyName = "";
      this.contractSigningForm = "";
      this.contractSigningDate = "";
      this.companyFullName = "";
      this.image = "";
      this.data = {
        companyName: "",
        contractSigningDate: "",
        contractSigningForm: "",
        companyFullName: "",
        image: "",
        id: "",
      };
    },

    clickLastPage() {
      if (this.page > 1) {
        this.page--;
        if (this.page == 1) {
          this.color = "#EBEBEB";
        } else {
          this.color = "#268FDE";
        }
        if (this.page < this.totalPages) {
          this.color1 = "#268FDE";
        }
        this.getRenderList();
      } else {
        this.color = "#EBEBEB";
      }
    },

    clickNextPage() {
      if (this.page < this.totalPages) {
        this.page++;
        this.color = "#268FDE";
        if (this.page == this.totalPages) {
          this.color1 = "#EBEBEB";
        } else {
          this.color1 = "#268FDE";
        }
      }
      this.getRenderList();
    },

    addOneLine() {
      this.flag++;
      this.smallTable.push({
        flag: this.flag,
        shipName: "",
        imo_no: "",
        firstFillTime: "",
      });
    },

    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 30 + "px";
      }
    },
  },

  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作
      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
  },

  created() {
    this.sendMessage();
    this.getRenderList();

    // this.getYear();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    let that = this;
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.dialog2 {
  z-index: 100000;
}
/* 去掉表头的边框（如果表头有单独的边框样式） */
.custom-date-picker-width .el-input__inner {
  width: 100% !important; /* 修改为你想要的宽度 */
}
.no-calendar-icon .el-popper .el-picker-panel {
  display: none;
}
.dialogInput {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
}
.addOneLine {
  width: 100%;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    cursor: pointer;
  }
}
.chuanxin {
  margin-top: 10px;
  width: 100%;
  font-size: 15px;
  text-align: center;
  color: #365488;
}
.chuanxinTable {
  width: 540px;
  margin: auto;
  height: 200px;
  color: #365488;
}
.el-table__border-left-patch:after {
  height: 0;
}
.addfile {
  width: 100%;
  height: 40px;
  font-size: 15px;
}
.addfile::file-selector-button {
  width: 100%;
  height: 4vh;
  background-color: #1e9fff;
  border: 1px solid #1e9fff;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
}
.fileName {
  font-size: 15px;
  color: black;
  height: 3vh;
  line-height: 3vh;
  width: 100%;
  text-align: center;
}

.manyInput {
  width: 780px;
  height: 80vh;
  margin: auto;
  overflow: auto;

  .iuptInnerContain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .inputInner {
      width: 375px;
      height: 35px;
      margin-top: 10px;
      margin-right: 10px;
      display: flex;
      align-items: center;

      color: #365488;
      .name {
        width: 150px;
        height: 100%;
        line-height: 4vh;
        text-align: right;
        font-size: 15px;
      }

      .name1 {
        width: 100px;
        height: 100%;
        height: 100%;
        margin-left: 15px;
        line-height: 3vh;
        // justify-content: center;
        border-radius: 5px;
        outline: none;
        font-size: 15px;
        border: none;
        background: #5cc735;
        color: white;
      }
      .inputContainer {
        width: 210px;
        margin-left: 5px;
      }
      .el-input__inner {
        background: white !important;
      }
      input {
        width: 220px;
        height: 34px;
        margin-left: 5px;
        border-radius: 5px;
        text-indent: 1em;
        outline: none;
        border: none;
        background: white !important;
        color: #365488;
        border: 1px solid #dcdfe6;
      }
      input::-webkit-input-placeholder {
        color: #a8abb2;
      }
      input[type="date"] {
        // padding: 5px;
        color: #365488;
        text-align: left;
        // border: 1px solid #365488;
        border-radius: 4px;
        // background-color: #fff;
        box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */
      }
      // input[type="number"] {
      //   appearance: textfield;
      //   -moz-appearance: textfield;
      // }
      // 　　input[type="number"]::-webkit-inner-spin-button,
      // 　　input[type="number"]::-webkit-outer-spin-button {
      //   -webkit-appearance: none;
      //   margin: 0;
      // }
    }
    .el-date-picker .el-picker-panel {
      background-color: white !important; /* 你想要的背景颜色 */
    }
  }
}
.dialogText {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 25px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}

.dialog,
.dialog1,
.dialog3,
.dialog4 {
  width: 100%;
  height: 100%;
  background: #dfe6e8;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
}

.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;

    .loadSecond {
      width: 280px;

      color: black;
      text-align: center;
      line-height: 33px;
      color: black;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 10px;
      font-size: 15px;
      .seleteYear {
        width: 200px;
        height: 30px;
        display: flex;
        align-items: center;

        .slecteName {
          width: 70px;
          font-size: 16px;
          text-align: left;
          font-weight: 600;
        }
        select {
          width: 140px;
          font-size: 16px;
        }
      }
    }
  }
  // background: blue;
}
.table {
  width: 98.5%;
  margin: auto;
  // margin-top: 2vh;

  // background: red;
}
.table1 {
  height: 65vh;
}
.table2 {
  height: 30vh;
}

/*去掉表格单元格边框*/
.customer-no-border-table th {
  border: none;
}
.customer-no-border-table td,
.customer-no-border-table th.is-leaf {
  border: none;
}
/*表格最外边框*/
.customer-no-border-table .el-table--border,
.el-table--group {
  border: none;
}
/*头部边框*/
.customer-no-border-table thead tr th.is-leaf {
  border: 0px solid #ebeef5;
  border-right: none;
}
.customer-no-border-table thead tr th:nth-last-of-type(2) {
  border-right: 0px solid #ebeef5;
}
/*表格最外层边框-底部边框*/
.customer-no-border-table .el-table--border::after,
.customer-no-border-table .el-table--group::after {
  width: 0;
}
.customer-no-border-table::before {
  width: 0;
}
.customer-no-border-table .el-table__fixed-right::before,
.el-table__fixed::before {
  width: 0;
}
.customer-no-border-table .el-table__header tr th {
  background: #fff;
  color: #333333;
  padding: 3px;
  border: 0px;
  font-size: 15px;
}
.deleteOneObj {
  width: 20px;
  height: 20px;
  background: #5cc735;
}
@media (min-width: 0px) and (max-width: 960px) {
  .manyInput {
    width: 375px !important;
    display: block !important;
    .inputInner {
      margin: auto !important;
      // margin-top: 10px !important;
    }
  }
  .closeAndSrue {
    width: 150px;
  }
  .chuanxinTable {
    width: 370px;
    margin: auto;
    height: 200px;
    background: red;
  }
}
</style>
